<template>
	<view class="content">
		<view class="title">Welcome Login!</view>
		
		<view class="loginForm" style="padding-top: 40px;">
			<u-form
				labelPosition="left"
				:model="userInfo"
				:rules="rules"
				ref="uForm"
			>
				<u-form-item
						prop="account"
						:borderBottom="false"
						ref="item1"
				>
					<u-input
							v-model="userInfo.account"
							placeholder="请输入账号名称"
					></u-input>
				</u-form-item>
				<u-form-item
						prop="password"
						:borderBottom="false"
						ref="item2"
				>
					<u-input
					    placeholder="请输入密码"
						type="password"
					    v-model="userInfo.password"
					  ></u-input>
				</u-form-item>
			</u-form>
			
			<view class="treaty" style="margin-top: 8px;">
			    <u-checkbox-group placement="row" @change="boxcheck" v-model="treaty">
			       <u-checkbox activeColor="blue" 
			            shape="circle" style="height: 20px;">
			       </u-checkbox>同意<view style="color: blue;" @click="show = true">《志愿者平台隐私协议》</view>
			    </u-checkbox-group>
			</view>
			
			<view style="margin-top: 40px;">
				<u-button text="登录"  @click="login"></u-button>
			</view>
			
			<view style="position: fixed;bottom: 100rpx;width: 100%;">
				<view>
					<navigator open-type="navigate" url="../logon/index" style="float: left;">
						<view style="font-size: 17px;">注册账号</view>
					</navigator>
					
					<navigator open-type="navigate" url="../loginPhone/index" style="float: right;margin-right: 150rpx;">
						<view style="font-size: 17px;">手机号登录</view>
					</navigator>
				</view>
				
			</view>
			
			
			<u-popup :show="show" @close="close" @open="open" :closeable="true">
				<view style="padding: 10px;height: 500px;">
					<h3 style="text-align: center;margin-top: 15px;">志愿者平台隐私协议</h3>
					<text style="margin-top: 20px;font-size: 17px;display: block;text-indent: 65rpx;">请遵守志愿者平台隐私协议，禁止违法行为，好好学习，天天向上，</text>
				</view>
			</u-popup>
			
		</view>
	</view>

</template>

<script>
import { loginApi } from '../../utils/user'
	export default {
		data() {
			return {
				treaty:[],
				show: false,
				userInfo: {
					account: '',
					password: '',
				},
				rules: {
					'account': {
						type: 'string',
						required: true,
						message: '请输入账号名称',
						trigger: ['blur', 'change']
					},
					'password': {
						type: 'string',
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		onLoad() {

		},
		methods: {
			async login(){
				if (this.treaty.length == 0) {
					uni.$u.toast('请勾选《志愿者平台协议》！')
				} else {
					let userLoginRequest = {
						userAccount: this.userInfo.account,
						userPassword: this.userInfo.password
					}
					const res = await loginApi(userLoginRequest)
					
					if(res.code == 0){
						uni.showToast({
							title:'登录成功',
							duration:2000,
							icon:'success'
						})
						console.log(res)
						let myInfo = {
							id: res.data.id,
							userName: res.data.userName,
							phone: res.data.phone,
							userAccount: res.data.userAccount,
							userAvatar: res.data.userAvatar
						}
						this.$store.commit('setId',myInfo.id)
						this.$store.commit('setPhone',myInfo.phone)
						this.$store.commit('setUserAccount',myInfo.userAccount)
						this.$store.commit('setUserAvatar',myInfo.userAvatar)
						this.$store.commit('setUserName',myInfo.userName)
						this.$store.commit('setLogin',myInfo)
						uni.$u.sleep(1000).then(() => {
							uni.reLaunch({
								url:'/pages/view/homepage/homepage'
							})
						})
						
					}else{
						uni.showToast({
							title:'账号或密码错误',
							duration:2000,
							icon:'error'
						})
					}
					
				}	
			},
			boxcheck(){
				
			},
			open() {
			  // console.log('open');
			},
			close() {
			  this.show = false
			  // console.log('close');
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 15px 40px;
	}
	.title{
		font-weight: 700;
		font-size: 50rpx;
		margin-top: 100px;
		text-align: center;
	}
	.pointName{
		font-size: 17px;
	}
	
	
</style>
